<template>
  <base-virtual-table
    ref="baseVirtualTableRef"
    :loading="loading"
    :columns="tableColumns"
    :height="600"
    :data-source="virtualData"
    :is-infinite-scroll="true"
    :infinite-scroll-disabled="noData"
    size="small"
    stripe
    border
    @selection-change="onSelectionChange"
    @load-more="onLoadMore"
  >
    <template #boundaryType="scope">
      <el-select v-model="scope.row.boundaryType" size="small" clearable>
        <el-option value="1" label="入口设备"></el-option>
        <el-option value="2" label="出口设备"></el-option>
      </el-select>
    </template>

    <template #action="scope">
      <base-icon-button icon="el-icon-edit" text="编辑" @click="onEdit(scope.row)"></base-icon-button>
    </template>
  </base-virtual-table>
</template>

<script>
const tableColumns = [
  { type: 'selection', reserveSelection: true, width: 60, fixed: 'left' },
  { type: 'index', title: '序号', width: 60, fixed: 'left' },
  { dataIndex: 'code', title: '编号', width: 180, fixed: 'left' },
  { dataIndex: 'name', title: '名称', width: 150 },
  { dataIndex: 'area', title: '面积', width: 150 },
  { dataIndex: 'address', title: '所在位置', width: 180 },
  { dataIndex: 'boundaryType', title: '类型', width: 180, scopedSlots: { customRender: 'boundaryType' } },
  { dataIndex: 'unitEquipNum', title: '关联设备', width: 150 },
  { dataIndex: 'test2', title: '测试2', width: 150 },
  { dataIndex: 'test3', title: '测试3', width: 150 },
  { dataIndex: 'test4', title: '测试4', width: 150 },
  { dataIndex: 'test5', title: '测试5', width: 150 },
  { dataIndex: 'test6', title: '测试6', width: 150 },
  { dataIndex: 'action', title: '操作', width: 120, fixed: 'right', scopedSlots: { customRender: 'action' } },
];

export default {
  name: 'big-data-table',
  data() {
    return {
      tableColumns,
      virtualData: [],
      multipleSelection: [],
      noData: false,
      loading: false,
      loadCount: 1, // 当前加载的次数
      maxLoadCount: 10, // 最大加载的次数，模拟加载接口请求
    };
  },
  mounted() {
    this.virtualData = [...this.virtualData, ...this.getList()];
  },
  methods: {
    getList() {
      let maxId = 0;
      if (this.virtualData.map(o => o.id).length > 0) {
        maxId = Math.max(...this.virtualData.map(o => o.id));
      }
      const list = [];
      for (let i = maxId; i < maxId + 10; i++) {
        list.push({
          id: i + 1,
          code: new Date().getTime(),
          name: '测试名称_' + i,
          area: (Math.random() * 1000).toFixed(2),
          address: `测试地址_${ i }`,
          test2: this.getRandomContent(),
          test3: this.getRandomContent(),
          test4: this.getRandomContent(),
          test5: this.getRandomContent(),
          test6: this.getRandomContent(),
          test7: this.getRandomContent(),
          unitEquipNum: Math.ceil(Math.random() * 100),
        });
      }
      return list;
    },

    /**
     * 编辑
     * @param record
     */
    onEdit(record) {
      console.log('编辑 => ', JSON.parse(JSON.stringify(record)));
    },

    onSelectionChange(selections) {
      this.multipleSelection = selections;
    },

    /**
     * 随机生成文本内容
     * @return {string}
     */
    getRandomContent() {
      const content = [
        '这是一条测试数据',
        '君不见黄河之水天上来，奔流到海不复回。',
        '十年生死两茫茫',
        '寻寻觅觅，冷冷清清，凄凄惨惨戚戚。',
        '桃花坞里桃花庵，桃花庵里桃花仙；桃花仙人种桃树，又摘桃花卖酒钱。',
        '明月几时有，把酒问青天。',
        '槛菊愁烟兰泣露，罗幕轻寒，',
        '寒蝉凄切，对长亭晚，骤雨初歇。都门帐饮无绪，留恋处，兰舟催发。执手相看泪眼，竟无语凝噎。念去去，千里烟波，暮霭沉沉楚天阔。多情自古伤离别，更那堪冷落清秋节！今宵酒醒何处？杨柳岸，晓风残月。此去经年，应是良辰好景虚设。便纵有千种风情，更与何人说？',
        '红豆生南国，春来发几枝。',
        '黄鹂',
      ];
      const i = Math.floor(Math.random() * 10);
      return content[i];
    },

    onLoadMore() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.loadCount += 1;
        this.noData = this.loadCount >= this.maxLoadCount;
        this.virtualData = [...this.virtualData, ...this.getList()];
      }, 1000);
    },

    onSave() {
      console.log('save => ', this.multipleSelection);
    },

    onClear() {
      this.$refs.baseVirtualTableRef.clearSelection();
    },

    checked() {
      this.$refs.baseVirtualTableRef.setCurrentRow(this.virtualData[5]);
    },
  },
};
</script>

<style lang="scss"></style>
